<template>
		<!--事件时间轴-->
		<view class="timeAxis">
			<view class="ul">
				<view class="li" v-for="(item,index) in dataList" :key="index">
					<view class="li-left">
						<view class="image-title">
							{{item.name}}
							<!-- -1:等待处理 0:初始化提交 1:同意 2::拒绝 3::转交 4::取消', -->
							<span v-if="item.icon==-1" class="iconfont icon-shenglve"></span>
							<span v-if="item.icon==0||item.icon==1" class="iconfont icon-wanchengchenggong"></span>
							<span v-if="item.icon==2||item.icon==4" class="iconfont icon-cha"></span>
							<span v-if="item.icon==3" class="iconfont icon-zhuanjiao"></span>
						</view>
					</view>
					<view class="li-rigth">
						<view class="rigth-title">
							<view class="title">{{item.title}}</view>
							<view class="p">{{item.time||''}}</view>
							<view @click="open(item)" :class="item.boxshow ? 'iconfont icon-down-trangle-copy':'iconfont icon-down-trangle'" v-if="item.users.length>1"></view>
							<!-- 详情 -->
							<block v-if="item.electronic">
								<div v-if="index!=0" class="info" @click="findHistoryList(item)">详情</div>
							</block>
							
						</view>
						<slot v-if="item.users.length==1||item.users.length==0">
							<view class="rigth-man" >{{item.content}}</view>
							<view class="rigth-man" style="font-size: 12px;" v-if="item.suggest">
								<span v-if="item.icon==-1" class="rigth-man-wait">{{calculationName(item.content)}}(回复):{{item.suggest}}</span>
								<span v-if="item.icon==0||item.icon==1" class="rigth-man-agree">{{calculationName(item.content)}}(回复):{{item.suggest}}</span>
								<span v-if="item.icon==2||item.icon==4" class="rigth-man-refuse">{{calculationName(item.content)}}(回复):{{item.suggest}}</span>
								<span v-if="item.icon==3" class="rigth-man-hand">{{calculationName(item.content)}}(回复):{{item.suggest}}</span>
							</view>
						</slot>
						<slot v-if="item.users.length!=1&&item.users.length!=0">
							<view class="rigth-man">{{item.content}}</view>
							<view class="right-image" v-if="item.boxshow">
								<view class="li-image"  v-for="(item3,index3) in item.users " :key="index3">
									<view :class="calculation(item3)?'image image-bg':'image'">{{calculationUserName(item3)}}</view>
									{{item3}} 
								</view>
							</view>
						</slot>
					</view>
				</view>
				
			</view>
			<u-popup v-model="popup.show" mode="bottom">
				<view class="popup">
					<u-cell-group v-if="popup.historyList.length>0">
						<u-cell-item :arrow="false" v-for="(item,index) in popup.historyList" :key="index">
							<view slot="title">
								<view class="i-item">
									<view class="i-i-l">操作时间</view>
									<view class="i-i-r">{{item.operateTime}}</view>
								</view>
								<view class="i-item">
									<view class="i-i-l">操作对象</view>
									<view class="i-i-r"> {{item.username}}</view>
								</view>
								<view class="i-item">
									<view class="i-i-l">操作信息</view>
									<view class="i-i-r">{{item.reason}}</view>
								</view>
							</view>
						</u-cell-item>
					</u-cell-group>
					<u-empty text="暂无数据" mode="list" v-else></u-empty>
				</view>
			</u-popup>
		</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		computed:{
			...mapGetters(["userInfo",'api']),
			calculation(){//计算出多人有没有同意或拒绝
				return function(item){
					let onoff=item.includes('(')
					let num=item.indexOf('(')
					let arr=item.slice(num-2,num)
					return onoff
				}
			},
			calculationName(){//计算出名字是否包含（）出现了就取（前两个字
				return function(item){
					let onoff=item.includes('(')
					let num=0
					let arr=''
					if(onoff){
						num=item.indexOf('(')
						arr=item.slice(0,num)
					}else{
						arr=item.slice(0,item.length)
					}
					return arr
				}
			},
			calculationUserName(){//计算出名字太长取后两个字
				return function(item){
					if(item.length>2){
						return item.slice(item.length-2,item.length)
					}else{
						return item
					}
				}
			}
		},
		data(){
			return {
				dataList:[],
				popup:{
					show:false,
					historyList:[]
				}
			}
		},
		props: {
			timeAxisData: {
				type: Array,
				required: true,
				default: function(){
					return [];//或者是return {}
				}
			},
		},
		watch:{
			timeAxisData(now){
				this.dataList=JSON.parse(JSON.stringify(this.timeAxisData))
			}
		},
		onLoad(e) {
		},
		created() {
		},
		methods:{
			findHistoryList(row){
				this.$u.get(this.api.GLOBAL_application_node_history_findHistoryList+'/'+row.id,{}).then(res => {
					if(res.code==200){
						this.popup.show=true
						this.popup.historyList=res.data
					}
				})
			},
			open(item){
				item.boxshow=!item.boxshow
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
@import "./time-axis.scss";
</style>
